@import '../../scss/mixin';
@import '../../scss/variable';

.search{
    @include wh(100%,100%);
    background: #f7f7f8;

}
.header{
    @include wh(100%,100px);
    @include flex(row,space-between,center);
    box-shadow: rgba($color: #000000, $alpha: 1.0) 0px 1px 10px 0;
    padding: 10px 0;
    background: #fff;
    z-index: 33;
    span{
        flex: 1;
        text-align: center;
        &:nth-child(3){
            color: #000000;
            flex: 1.5;    
        }
        i{
            font-size: .28rem;
        }
    }
    .inputWrap{
        flex: 7.5;
        background: #eee;
        height: 100%;
        @include flex(row,center,center);
        font-size: .38rem;
        color: gray;
        i{   
           width: 15%;
           color: gray;
           font-size: .32rem;
           text-align: center;
        }
        input{
            @include wh(85%,100%);
            border: none;
            background: #eee;
            outline: none;
            font-size: .3rem;
        }
    }
   
}
.divContent{
    @include wh(100%,617px*2);
    
}
.divWrap{
    @include wh(100%,1164px);
    overflow: auto;
}
.module{
    padding: 0 20px 20px;
    background: #fff;
    margin-bottom: 10px;
    .title{
        @include wh(100%,70px);
        @include flex(row,space-between,center);
        font-size: .32rem;
        color: #000;
        i{
            font-size: .4rem;
        }
    }
    .content{
        button{
            padding: 15px 25px;
            margin: 5px;
            border: 1px solid #999;
            border-radius: 10px;
            background: none;
            font-size: .28rem;
            color: gray;
            outline: none;
            &.active{
                border-color: red;
                color: red;
            }
        }
    }
}
.nav{
    @include wh(100%,70px);
    background: #fff;
    @include flex(row,center,center);
    border-bottom: 1px solid gray;
    position: relative;
    .show{
        position: absolute;
        bottom: -120px;
        left: 0;
        @include wh(100%,110px);
        line-height: 110px;
        background: #fff;
        box-shadow: rgba($color: #000000, $alpha: 0.5) 0 5px 8px 0px;
        span{
            padding: 16px 30px;
            border-radius: 10px;
            border: 1px solid gray;
            margin-left: 15px;
            color: gray;
            &.active{
                border-color: red;
                color: red;
            }
        }
    }
    .spanItem{
        flex: 1;
        text-align: center;
        position: relative;
        .arrow{
            @include wh(20px,30px);
            position: absolute;
            right: 28%;
            top: 6%;
            span{
                position: absolute;
            }
            .asc{
                @include triangle()  ;
                bottom: 16px;
                left: 0;
                &.active{
                    @include triangle(10px,top,red)  ;
                }
            }
            .desc{
                @include triangle(10px,bottom);
                top: 18px;
                left: 0;
                &.active{
                    @include triangle(10px,bottom,red)  ;
                }
            }
        }
    }
    .navactive{
        color: red;
    }
}